/*
 * @Descripttion:
 * @version:
 * @Author: kl2018
 * @Date: 2019-11-12 15:34:19
 * @LastEditors: kl2018
 * @LastEditTime: 2020-08-10 14:21:10
 */
import React, { Component } from 'react';
import { WeaLocaleProvider, WeaHelpfulTip } from 'ecCom';
import { Popover, Icon } from 'antd';
import { hashHistory } from 'react-router';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';

const getLabel = WeaLocaleProvider.getLabel;

@inject('navStore')
@observer
export default class Nav extends Component {
  constructor(props) {
    super(props);

    this.changePage = this.changePage.bind(this);
    this.onFontSizeChange = this.onFontSizeChange.bind(this);
  }

  componentDidMount() {
    const { navStore } = this.props;
    navStore.getThemeInfo();
    navStore.getAccount();
    navStore.getMenus();
  }


  changePage(menuid) {
    hashHistory.push(`/main/odocExchange/Nav/${menuid}`);
  }

  render() {
    const { navStore } = this.props;
    const { menus, accountVisible, account } = navStore;

    let currentPathname = this.props.location.pathname;

    // 判断是否拥有菜单权限
    /* let hasRight = false;
    menus.map(menu=>{
      if (currentPathname.endsWith(menu.id)) {
        hasRight = true;
      }
    })

    if(!hasRight){
      return <WeaAlertPage >
          <div>{getLabel(2012, '对不起，您暂时没有权限！')}</div>
        </WeaAlertPage>
    } */

    /* const menus = [
      { id: "unitSet", iconClass: "icon-coms-danweishezhi", name: getLabel(16511, "单位设置") },
      { id: "FieldSet", iconClass: "icon-coms-content-o", name: getLabel(21903, "字段设置") },
      { id: "logCenter", iconClass: "icon-coms-rizhizhongxin", name: getLabel(33643, "日志中心") },
      { id: "receiveDocManage", iconClass: "icon-coms-danweishezhi", name: getLabel(387593, "收文管理") },
      { id: "postDocManage", iconClass: "icon-coms-fawen", name: getLabel(387595, "发文管理") },
    ]; */
    let accountClassName = 'personinfo';
    let accountIconArrowClassName = 'icon-coms-down2';
    if (accountVisible) {
      accountClassName = 'personinfoSelected';
      accountIconArrowClassName = 'icon-coms-up2';
    }

    return (
      <div className="oDocExchange" >
        <div className="oDocExchangeHeader">
          <div className="logotitle"><i className="icon-coms-official" /><span>{getLabel(387592, '公文交换平台')}</span></div>
          <div className="nav wea-f12" ref={(nav) => { this.nav = nav; }}>
            {
              toJS(menus).map((menu, i) => {
                let className = 'menu';
                if (currentPathname.includes(menu.id)) {
                  className = 'menu selected';
                }
                return (<div className={className} onClick={() => this.changePage(menu.id)} key={menu.id}>
                  <i className={menu.iconClass} />
                  <span>{menu.name}</span>
                </div>);
              })
            }

          </div>
          <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@8mjmwc`}
            content={this.renderPersonSetting()}
            trigger="click"
            placement="bottomRight"
            overlayClassName="e9-odocExchange-person-setting-overlay"
            visible={accountVisible}
            onVisibleChange={navStore.onAccountVisibleChange}
            overlayStyle={{ width: 220 }}
          >
            <div className={accountClassName} >
              <i className="icon-coms-yonghu" />
              <span>{account.username}</span>
              <i className={accountIconArrowClassName} />
            </div>
          </Popover>
        </div>
        <div className="mainContent">
          <div className="mainComponent">
            {this.props.children}
          </div>
        </div>
      </div>
    );
  }

  renderPersonSetting() {
    const { navStore } = this.props;
    const { fontSettingVisible, themeInfo } = navStore;
    const { themeFontSize = '12' } = themeInfo;
    return (<div className="shade">
      <div className="personset">
        <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@rbnitz`}
          trigger="click"
          placement="leftTop"
          content={<FontSizeSettingContent ecId={`${this && this.props && this.props.ecId || ''}_FontSizeSettingContent@wbx6bq`} fontSize={themeFontSize} onChange={this.onFontSizeChange} />}
          overlayClassName="e9-odocExchange-font-setting-overlay"
          visible={fontSettingVisible}
          onVisibleChange={visible => navStore.onFontSettingVisibleChange(visible)}
        >
          <div className="e9header-account-setting-item">
            <i className="icon-coms-text" style={{ fontSize: '12px', fontWeight: 700, marginTop: '-7px' }} />
            <span className="e9header-account-setting-title">{getLabel(129933, '字体设置')}&nbsp;</span>
            <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@ptwnl0`} title={getLabel(386450, '注意：字体大小修改只对使用系统标准样式的内容有效，对于用户自行定义的样式（例如：流程表单内容、文档内容）不生效')} />
            <span style={{ position: 'absolute', right: '30px' }}>{{ 12: getLabel(149, '默认'), 14: getLabel(22987, '中'), 16: getLabel(18144, '大') }[themeFontSize]}</span>
            <i className="icon-coms-organization-right" style={{ position: 'absolute', right: '10px' }} />
          </div>
        </Popover>
        <div onClick={() => this.changePage('changePassword', '')}>
          <i className="icon-coms-locking-o" />
          <span>{getLabel(17993, '修改密码')}</span>
        </div>
        <div onClick={() => navStore.logout()}>
          <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@hhj4yi`} type="poweroff" />
          <span>{getLabel(1205, '退出')}</span>
        </div>
      </div>
    </div>);
  }

  onFontSizeChange(fontSize) {
    const { navStore } = this.props;
    navStore.onFontSizeChange(fontSize);
    navStore.onFontSettingVisibleChange(false);
  }
}

class FontSizeSettingContent extends React.Component {
  render() {
    const { fontSize } = this.props;
    const selectedComp = <i className="icon-coms-Selected e9-odocExchange-font-setting-selected" />;

    return (
      <div className="e9-odocExchange-font-setting-content">
        <div className="e9-odocExchange-font-setting-item" onClick={() => this.props.onChange('16')}>
          <i className="icon-coms-text" style={{ fontSize: '16px' }} />
          <span style={{ fontSize: '16px', marginLeft: '8px' }}>{getLabel(18144, '大')}</span>
          {fontSize == '16' ? selectedComp : ''}
        </div>
        <div className="e9-odocExchange-font-setting-item" onClick={() => this.props.onChange('14')}>
          <i className="icon-coms-text" style={{ fontSize: '14px' }} />
          <span style={{ fontSize: '14px', marginLeft: '10px' }}>{getLabel(22987, '中')}</span>
          {fontSize == '14' ? selectedComp : ''}
        </div>
        <div className="e9-odocExchange-font-setting-item" onClick={() => this.props.onChange('12')}>
          <i className="icon-coms-text" style={{ fontSize: '12px' }} />
          <span style={{ fontSize: '12px', marginLeft: '12px' }}>{getLabel(149, '默认')}</span>
          {fontSize == '12' ? selectedComp : ''}
        </div>
      </div>
    );
  }
}
